.usercenter {
	background: #ddd;
	padding-bottom: 3rem;
	.head{
		background: url(../../assets/images/usercenter/head-bg.png) no-repeat;
		background-size: 100% 100%;
		padding-bottom: 3rem;
		h1 {
			font-size: 1.625rem;
			float: right;
			margin-right: 1rem;
			color: #fff;
			margin-top: 2rem;
		}
		.uc-head {
			min-height: 20rem;
			position: relative;
	
			>img {
				width: 100%;
				display: block;
			}
	
			>a {
				position: absolute;
	
				font-size: 1.75rem;
				color: #fccc5b;
				cursor: pointer;
	
				&.link-security {
					right: 1.5rem;
					top: 1rem;
				}
	
				&.link-follow {
					left: 1.5rem;
					top: 2rem;
				}
			}
	
			>p {
				position: absolute;
				right: 1.5rem;
				top: 2.6rem;
				font-size: 1.75rem;
				line-height: 1.5rem;
				color: #fccc5b;
				cursor: pointer;
	
				img {
					height: 1.5rem;
					vertical-align: top;
					margin-left: 0.5rem;
				}
			}
	
			.uc-info-card {
				width: 100%;
				padding-top: 4rem;
	
				.uc-info-name {
					float: left;
					color: #fff;
					font-size: 2.25rem;
					font-weight: bold;
					flex-grow: 1;
					align-items: center;
					padding-left: 1.5rem;
				}
	
				.uc-info-card-top {
					padding: 1.875rem;
					align-items: left;
	
					.uc-info-header {
						width: 10.8125rem;
						height: 10.8125rem;
						margin: auto;
	
						img {
							width: 100%;
							height: 100%;
						}
					}
	
					.uc-info-level {
						text-align: center;
	
						h3 {
							color: #fff;
							font-size: 1.875rem;
						}
					}
	
				}
	
			}
		}
	}
							.uc-info-card-bottom {
								text-align: center;
								display: flex;
								height: 7.5rem;
								margin: 1rem;
								margin-top: -2rem;
								background: linear-gradient(0deg, #eb6b0a 0%, #f8b013 98%);
    							border-radius: 2rem;
				
								.uc-info-amount {
									display: flex;
									h4 {
										margin: auto;
										margin-right: 0;
										font-size: 1.5rem;
										height: 1.25rem;
										color: #fff;
				
										span {
											display: inline-block;
										}
				
										img {
											height: 1.25rem;
											margin-right: 0.625rem;
											vertical-align: baseline;
										}
									}
				
									.amount-number {
										img {
											margin-right: 1rem;
										}
				
										display: flex;
										margin: auto;
										font-size: 2.25rem;
										color: #fff;
									}
								}
				
								>div {
									flex: 1;
									padding: 0 1.5rem;
								}
				
								img {
									display: block;
									margin: 0 auto;
									height: 3rem;
									margin-bottom: 0.5rem;
								}
				
								span {
									color: #fff;
									font-size: 1.5rem;
									line-height: 1.8rem;
									display: block;
								}
							}


	.uc-totle{
		background: #fff;
		margin-bottom: .625rem;
		.totle-text{
			display: flex;
			div{
				width: 32%;
				padding: 1rem;
				text-align: center;
				p{color: #999999;font-size: 1.75rem;};
				h1{font-size: 3rem;}
			}
		}
		.btn{
			padding: 1.875rem;
			display: flex;
			font-size: 2.3438rem;
			.btn-A{
				color: #fff;
				background:linear-gradient(-90deg,rgba(42,91,200,1),rgba(22,124,240,1));
				border-radius:1.875rem;
				padding: .5rem 3rem;
				margin-right: 1.25rem;
			}
			.btn-B{
				color: rgba(42,91,200,1);
				border: 0.0625rem solid rgba(42,91,200,1);
				border-radius:1.875rem;
				padding: .5rem 3rem;
			}
			.btn-right{
				display: flex;
				color: #999;
				font-size: 2.25rem;
				margin: auto;
				margin-right: 0;
				img{
					margin-top: .5rem;
    				margin-left: 1rem;
					width: 2.25rem;
					height: 2.25rem;
				}
			}
		}
	}

	.list {
		background: #fff;
		margin: 1rem;
		border-radius: 2rem;
		ul {
			padding-left: 3.125rem;

			li {
				padding: 2.8125rem 0;
				display: flex;
				justify-content: space-between;
				list-style-type: none;
				border-bottom: solid 1px #ddd;

				div {

					width: 100%;
					padding-left: 2rem;

				}

				img {
					height: 2.9375rem;
				}

				p {
					font-size: 2.125rem;
					color: #333;
				}

				h4 {
					color: #A7A7AF;
					font-size: 2rem;
					margin-right: 2rem;
				}
			}
		}
	}

	.uc-info {
		padding: 3rem 1.5rem;
		background: #000;

		.uc-info-address {
			>div {
				background: linear-gradient(0deg, rgba(247, 206, 112, 1), rgba(255, 221, 145, 1));
				box-shadow: -0.375rem 0px 1rem 0px rgba(135, 135, 135, 0.1);
				border-radius: 0.75rem;
				padding: 2.5rem 1.5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;

				img {
					width: 2.8125rem;
					height: 2.6875rem;
					margin-right: 0.5rem;
				}

				p {
					font-size: 1.875rem;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				a {
					white-space: nowrap;
					color: #333;
					border-radius: 1.4rem;
					font-size: 1.875rem;
					padding: 0.1rem 0.5rem;
				}
			}
		}
	}

	.uc-list {
		.uc-list-head {
			font-size: 2.25rem;
			line-height: 5rem;
			display: flex;
			background: #000;
			padding-top: 1.5rem;

			a {
				display: block;
				width: 50%;
				text-align: center;
				color: #fccc5b;
				position: relative;
				font-weight: normal;

				&.active {
					color: #fccc5b;
					font-weight: bold;

					&:after {
						content: '';
						width: 3rem;
						height: 0.25rem;
						border-radius: 0.1rem;
						background: #fccc5b;
						position: absolute;
						left: 50%;
						bottom: 0;
						margin-left: -1.5rem;
					}
				}
			}
		}

		.uc-list-body {
			padding: 0 1.5rem;
		}
	}

}

.pay-sure-box {
    width: 90%;
    left: 5%;
    top: 50%;
    padding: 3rem;
    position: absolute;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    border-radius: 1rem;

    .icon-close {
      font-size: 4rem;
      color: #999;
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-style: normal;
      line-height: 4rem;
      display: block;
      width: 4rem;
      height: 4rem;
      text-align: center;

      &:active {
        color: #265BCD;
      }
    }

    h3 {
      font-size: 2.4rem;
      margin-bottom: 1rem;
      margin-top: 2rem;
      text-align: center;
      font-weight: normal;
    }

    .user-amount {
      font-size: 3rem;
      color: #265BCD;
      text-align: center;
      margin: 2rem 0;
    }

    button.btn-primary {
      width: 40%;
      padding: 1.5rem 0;
    }

    button.btn-default {
      width: 40%;
      font-size: 2.25rem;
      padding: 1.5rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      margin: 4rem auto 0 auto;
      border: none;
      background: #E6E6E6;
      border-radius: 3rem;
      color: #333;
    }

    p {
      font-size: 1.5rem;
      color: #333;
      margin-top: 1rem;
      text-align: center;
    }

    .btn-primary {
      font-size: 2.25rem;
      padding: 1.75rem 0;
      line-height: 1;
      text-align: center;
      display: block;
      width: 70%;
      margin: 4rem auto 0 auto;
      border: none;
      background: #265BCD;
      border-radius: 3rem;
      color: #fff;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }
  }

button.btn-primary {
	width: 40%;
	padding: 1.5rem 0;
}

.btn-primary {
	font-size: 2.25rem;
	padding: 1.75rem 0;
	line-height: 1;
	text-align: center;
	display: block;
	width: 70%;
	margin: 4rem auto 0 auto;
	border: none;
	background: #FCCC5B;
	border-radius: 3rem;
	color: #333;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

button.btn-default {
	width: 40%;
	font-size: 2.25rem;
	padding: 1.5rem 0;
	line-height: 1;
	text-align: center;
	display: block;
	margin: 4rem auto 0 auto;
	border: none;
	background: #E6E6E6;
	border-radius: 3rem;
	color: #333;
}